
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* vue */
import VC from '@model/VC'
import { CreateElement } from 'vue'
import { Component, Emit, Prop } from 'vue-property-decorator'

/* scss */
import '@src/component/ui/UiTitle/index.scss'

@Component({
  name: ComponentNameEnum.UiTitle,
})
class UiTitle extends VC {

  /* 主标题 */
  @Prop() readonly title: string | undefined
  /* 提示文案 */
  @Prop() readonly tips: string | string[] | undefined

  tipsRender(){
    if(!this.tips) return '';

    if( typeof this.tips === 'string') return (<div class="tip">{this.tips}</div>);
    
    return (
      <div class="tips">
        {
          this.tips.map((item: string) => {
            return <div class="con">{item}</div>
          })
        }
      </div>
    )
  }
  
  render(h: CreateElement) {
    return (
      <div class="setting_title_contain">
        <div class="setting_title">
          
          <h3>{this.title}</h3>

          { this.$slots.default }
          
        </div>
        { this.tipsRender() }
      </div>
    )
  }
}

export default UiTitle